<template>
  <div class="theme-management">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <h1 class="page-title">主题管理</h1>
        <p class="page-desc">管理站点主题，支持主题安装、切换和配置</p>
      </div>
      <div class="header-right">
        <el-button type="primary" icon="Upload" @click="showInstallDialog" class="install-btn">
          安装主题
        </el-button>
      </div>
    </div>
    
    <!-- 主题列表 -->
    <div class="theme-grid">
      <div
        v-for="theme in themes"
        :key="theme.name"
        class="theme-card"
        :class="{ active: theme.active }"
      >
        <div class="theme-screenshot">
          <img
            v-if="theme.screenshot"
            :src="theme.screenshot"
            :alt="theme.displayName"
          />
          <div v-else class="screenshot-placeholder">
            <el-icon><Picture /></el-icon>
            <span>暂无预览图</span>
          </div>
        </div>
        
        <div class="theme-info">
          <div class="theme-header">
            <h3 class="theme-name">{{ theme.displayName }}</h3>
            <div class="theme-badges">
              <el-tag v-if="theme.active" type="success" size="small">当前主题</el-tag>
              <el-tag v-if="!theme.installed" type="warning" size="small">未安装</el-tag>
            </div>
          </div>
          
          <div class="theme-meta">
            <div class="meta-item">
              <span class="label">版本:</span>
              <span class="value">{{ theme.version }}</span>
            </div>
            <div class="meta-item">
              <span class="label">作者:</span>
              <span class="value">{{ theme.author }}</span>
            </div>
          </div>
          
          <div class="theme-description">
            {{ theme.description }}
          </div>
          
          <div class="theme-actions">
            <el-button
              v-if="!theme.active && theme.installed"
              type="primary"
              size="small"
              @click="activateTheme(theme)"
            >
              激活
            </el-button>
            
            <el-button
              size="small"
              @click="previewTheme(theme)"
            >
              预览
            </el-button>
            
            <el-dropdown @command="(command) => handleCommand(command, theme)">
              <el-button size="small">
                更多<el-icon><ArrowDown /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="config">
                    配置
                  </el-dropdown-item>
                  <el-dropdown-item command="templates">
                    模板管理
                  </el-dropdown-item>
                  <el-dropdown-item command="copy">
                    复制主题
                  </el-dropdown-item>
                  <el-dropdown-item command="export">
                    导出主题
                  </el-dropdown-item>
                  <el-dropdown-item
                    command="uninstall"
                    divided
                    v-if="!theme.active"
                  >
                    卸载
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 安装主题对话框 -->
    <el-dialog
      v-model="installDialogVisible"
      title="安装主题"
      width="500px"
    >
      <el-form :model="installForm" label-width="100px">
        <el-form-item label="主题名称" required>
          <el-input v-model="installForm.themeName" placeholder="请输入主题名称" />
        </el-form-item>
        
        <el-form-item label="主题文件" required>
          <el-upload
            ref="uploadRef"
            class="upload-demo"
            drag
            :auto-upload="false"
            :limit="1"
            accept=".zip"
            :on-change="handleFileChange"
          >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
              将主题文件拖到此处，或<em>点击上传</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">
                只能上传 zip 格式的主题文件
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="installDialogVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="installTheme"
          :loading="installing"
          :disabled="!installForm.themeName || !installForm.file"
        >
          安装
        </el-button>
      </template>
    </el-dialog>
    
    <!-- 主题配置对话框 -->
    <el-dialog
      v-model="configDialogVisible"
      :title="`${currentTheme?.displayName} - 主题配置`"
      width="800px"
    >
      <div class="config-form" v-if="currentTheme">
        <el-form :model="themeConfig" label-width="120px">
          <el-form-item
            v-for="(value, key) in themeConfig"
            :key="key"
            :label="formatConfigLabel(key)"
          >
            <el-input
              v-if="typeof value === 'string'"
              v-model="themeConfig[key]"
            />
            <el-input-number
              v-else-if="typeof value === 'number'"
              v-model="themeConfig[key]"
            />
            <el-switch
              v-else-if="typeof value === 'boolean'"
              v-model="themeConfig[key]"
            />
            <el-input
              v-else
              v-model="themeConfig[key]"
              type="textarea"
              :rows="3"
            />
          </el-form-item>
        </el-form>
      </div>
      
      <template #footer>
        <el-button @click="configDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveThemeConfig" :loading="configSaving">
          保存
        </el-button>
      </template>
    </el-dialog>
    
    <!-- 模板管理对话框 -->
    <el-dialog
      v-model="templatesDialogVisible"
      :title="`${currentTheme?.displayName} - 模板管理`"
      width="1000px"
    >
      <div class="templates-manager" v-if="currentTheme">
        <div class="templates-sidebar">
          <div class="sidebar-header">
            <span>模板列表</span>
          </div>
          <div class="template-list">
            <div
              v-for="template in themeTemplates"
              :key="template"
              class="template-item"
              :class="{ active: selectedTemplate === template }"
              @click="selectTemplate(template)"
            >
              {{ template }}.ftl
            </div>
          </div>
        </div>
        
        <div class="templates-content">
          <div class="content-header">
            <span>{{ selectedTemplate }}.ftl</span>
            <el-button type="primary" size="small" @click="saveTemplate">
              保存
            </el-button>
          </div>
          <div class="template-editor">
            <el-input
              v-model="templateContent"
              type="textarea"
              :rows="20"
              placeholder="模板内容"
            />
          </div>
        </div>
      </div>
    </el-dialog>
    
    <!-- 复制主题对话框 -->
    <el-dialog
      v-model="copyDialogVisible"
      title="复制主题"
      width="400px"
    >
      <el-form :model="copyForm" label-width="100px">
        <el-form-item label="新主题名称" required>
          <el-input v-model="copyForm.targetTheme" placeholder="请输入新主题名称" />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="copyDialogVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="copyTheme"
          :loading="copying"
          :disabled="!copyForm.targetTheme"
        >
          复制
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox, type UploadFile } from 'element-plus'
import { ArrowDown, Picture, Upload, Download, Setting, Copy, Delete } from '@element-plus/icons-vue'
import { themeApi } from '@/api/theme'

// 主题数据
const themes = ref<any[]>([])
const currentTheme = ref<any>()

// 对话框状态
const installDialogVisible = ref(false)
const configDialogVisible = ref(false)
const templatesDialogVisible = ref(false)
const copyDialogVisible = ref(false)

// 加载状态
const installing = ref(false)
const configSaving = ref(false)
const copying = ref(false)

// 安装表单
const installForm = reactive({
  themeName: '',
  file: null as File | null,
})

// 主题配置
const themeConfig = ref<Record<string, any>>({})

// 模板管理
const themeTemplates = ref<string[]>([])
const selectedTemplate = ref('')
const templateContent = ref('')

// 复制表单
const copyForm = reactive({
  sourceTheme: '',
  targetTheme: '',
})

// 获取主题列表
const getThemes = async () => {
  try {
    const response = await themeApi.getAvailableThemes()
    if (response.code === 0) {
      themes.value = response.data
      console.log('主题数据加载成功:', response.data)
    } else {
      console.log('API返回错误，使用模拟数据:', response)
      // 使用模拟数据作为后备
      themes.value = [
        {
          name: 'default',
          displayName: '默认主题',
          version: '1.0.0',
          author: 'shutu',
          description: 'Light CMS 默认主题，简洁美观',
          screenshot: '/static/themes/default/screenshot.png',
          installed: true,
          active: true,
          templates: ['index', 'channel', 'article', 'search'],
        },
        {
          name: 'simple',
          displayName: '简约主题',
          version: '1.0.0',
          author: 'shutu',
          description: '极简风格主题，适合博客和个人网站',
          screenshot: '/static/themes/simple/screenshot.png',
          installed: true,
          active: false,
          templates: ['index', 'channel', 'article'],
        },
        {
          name: 'business',
          displayName: '商务主题',
          version: '1.0.0',
          author: 'shutu',
          description: '专业商务风格主题，适合企业网站',
          screenshot: '/static/themes/business/screenshot.png',
          installed: false,
          active: false,
          templates: ['index', 'channel', 'article', 'about', 'contact'],
        },
      ]
    }
  } catch (error) {
    console.error('获取主题列表失败:', error)
    console.log('API调用失败，使用模拟数据')
    // API调用失败时也使用模拟数据
    themes.value = [
      {
        name: 'default',
        displayName: '默认主题',
        version: '1.0.0',
        author: 'shutu',
        description: 'Light CMS 默认主题，简洁美观',
        screenshot: '/static/themes/default/screenshot.png',
        installed: true,
        active: true,
        templates: ['index', 'channel', 'article', 'search'],
      },
      {
        name: 'simple',
        displayName: '简约主题',
        version: '1.0.0',
        author: 'shutu',
        description: '极简风格主题，适合博客和个人网站',
        screenshot: '/static/themes/simple/screenshot.png',
        installed: true,
        active: false,
        templates: ['index', 'channel', 'article'],
      },
      {
        name: 'business',
        displayName: '商务主题',
        version: '1.0.0',
        author: 'shutu',
        description: '专业商务风格主题，适合企业网站',
        screenshot: '/static/themes/business/screenshot.png',
        installed: false,
        active: false,
        templates: ['index', 'channel', 'article', 'about', 'contact'],
      },
    ]
    ElMessage.error('获取主题列表失败，使用默认数据')
  }
}

// 显示安装对话框
const showInstallDialog = () => {
  installDialogVisible.value = true
}

// 处理文件变更
const handleFileChange = (file: UploadFile) => {
  installForm.file = file.raw || null
}

// 重置安装表单
const resetInstallForm = () => {
  installForm.themeName = ''
  installForm.file = null
}

// 安装主题
const installTheme = async () => {
  if (!installForm.themeName || !installForm.file) {
    ElMessage.warning('请填写主题名称并选择主题文件')
    return
  }

  try {
    installing.value = true
    await themeApi.installTheme(installForm.themeName, installForm.file)
    ElMessage.success('主题安装成功')
    installDialogVisible.value = false
    resetInstallForm()
    getThemes()
  } catch (error) {
    console.error('安装主题失败:', error)
    ElMessage.error('安装主题失败')
  } finally {
    installing.value = false
  }
}

// 激活主题
const activateTheme = async (theme: any) => {
  try {
    // TODO: 调用激活主题API
    // await themeApi.activateTheme(theme.name, siteId)
    ElMessage.success(`主题"${theme.displayName}"激活成功`)
    getThemes()
  } catch (error) {
    console.error('激活主题失败:', error)
    ElMessage.error('激活主题失败')
  }
}

// 预览主题
const previewTheme = async (theme: any) => {
  try {
    // 打开预览窗口
    const previewUrl = themeApi.getPreviewUrl(theme.name, 'index')
    const previewWindow = window.open('', '_blank', 'width=1200,height=800,scrollbars=yes,resizable=yes')

    if (previewWindow) {
      previewWindow.document.write(`
        <html>
          <head>
            <title>主题预览 - ${theme.displayName}</title>
            <style>
              body { margin: 0; padding: 20px; font-family: Arial, sans-serif; }
              .preview-header {
                background: #f5f5f5;
                padding: 10px 20px;
                border-bottom: 1px solid #ddd;
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                z-index: 1000;
              }
              .preview-content {
                margin-top: 60px;
                border: 1px solid #ddd;
                border-radius: 4px;
                overflow: hidden;
              }
              iframe {
                width: 100%;
                height: calc(100vh - 100px);
                border: none;
              }
            </style>
          </head>
          <body>
            <div class="preview-header">
              <h3>主题预览：${theme.displayName} (${theme.version})</h3>
              <p>作者：${theme.author} | 描述：${theme.description}</p>
            </div>
            <div class="preview-content">
              <iframe src="${previewUrl}" frameborder="0"></iframe>
            </div>
          </body>
        </html>
      `)
      previewWindow.document.close()
    } else {
      ElMessage.error('无法打开预览窗口，请检查浏览器弹窗设置')
    }
  } catch (error) {
    console.error('预览主题失败:', error)
    ElMessage.error('预览主题失败')
  }
}

// 处理命令
const handleCommand = async (command: string, theme: any) => {
  console.log('处理命令:', command, '主题:', theme)
  currentTheme.value = theme

  try {
    switch (command) {
      case 'config':
        console.log('显示主题配置')
        await showThemeConfig(theme)
        break
      case 'templates':
        console.log('显示模板管理器')
        await showTemplateManager(theme)
        break
      case 'copy':
        console.log('显示复制对话框')
        showCopyDialog(theme)
        break
      case 'export':
        console.log('导出主题')
        await exportTheme(theme)
        break
      case 'uninstall':
        console.log('卸载主题')
        await uninstallTheme(theme)
        break
      default:
        console.log('未知命令:', command)
    }
  } catch (error) {
    console.error('处理命令失败:', error)
    ElMessage.error('操作失败')
  }
}

// 显示主题配置
const showThemeConfig = async (theme: any) => {
  try {
    console.log('获取主题配置，主题名称:', theme.name)
    const response = await themeApi.getThemeConfig(theme.name)
    console.log('主题配置API响应:', response)

    if (response.code === 0) {
      themeConfig.value = response.data || {}
      console.log('使用API返回的配置:', themeConfig.value)
    } else {
      console.log('API返回错误，使用默认配置:', response.msg)
      // 使用默认配置
      themeConfig.value = {
        siteName: 'Light CMS',
        siteDescription: '轻量级内容管理系统',
        primaryColor: '#409eff',
        showBreadcrumb: true,
        showSidebar: true,
      }
    }

    console.log('显示配置对话框')
    configDialogVisible.value = true
  } catch (error) {
    console.error('获取主题配置失败:', error)
    ElMessage.error('获取主题配置失败')

    // 使用默认配置
    themeConfig.value = {
      siteName: 'Light CMS',
      siteDescription: '轻量级内容管理系统',
      primaryColor: '#409eff',
      showBreadcrumb: true,
      showSidebar: true,
    }
    console.log('使用默认配置并显示对话框')
    configDialogVisible.value = true
  }
}

// 保存主题配置
const saveThemeConfig = async () => {
  try {
    configSaving.value = true
    const response = await themeApi.updateThemeConfig(currentTheme.value.name, themeConfig.value)
    if (response.code === 0) {
      ElMessage.success('主题配置保存成功')
      configDialogVisible.value = false
    } else {
      ElMessage.error(response.msg || '保存失败')
    }
    configDialogVisible.value = false
  } catch (error) {
    console.error('保存主题配置失败:', error)
    ElMessage.error('保存主题配置失败')
  } finally {
    configSaving.value = false
  }
}

// 显示模板管理器
const showTemplateManager = async (theme: any) => {
  try {
    const response = await themeApi.getThemeTemplates(theme.name)
    if (response.code === 0) {
      themeTemplates.value = response.data || []
    } else {
      themeTemplates.value = theme.templates || []
    }

    if (themeTemplates.value.length > 0) {
      selectedTemplate.value = themeTemplates.value[0]
      await loadTemplateContent(theme.name, selectedTemplate.value)
    }

    templatesDialogVisible.value = true
  } catch (error) {
    console.error('获取主题模板失败:', error)
    ElMessage.error('获取主题模板失败')
    // 使用备选数据
    themeTemplates.value = theme.templates || []
    templatesDialogVisible.value = true
  }
}

// 选择模板
const selectTemplate = async (template: string) => {
  selectedTemplate.value = template
  await loadTemplateContent(currentTheme.value.name, template)
}

// 加载模板内容
const loadTemplateContent = async (themeName: string, templateName: string) => {
  try {
    const response = await themeApi.getTemplateContent(themeName, templateName)
    if (response.code === 0) {
      templateContent.value = response.data || ''
    } else {
      // 使用默认模板内容
      templateContent.value = `<!DOCTYPE html>
<html>
<head>
    <title>\${site.name}</title>
</head>
<body>
    <h1>\${site.name}</h1>
    <p>这是 ${templateName} 模板</p>
</body>
</html>`
    }
  } catch (error) {
    console.error('获取模板内容失败:', error)
    ElMessage.error('获取模板内容失败')
    // 使用默认模板内容
    templateContent.value = `<!DOCTYPE html>
<html>
<head>
    <title>\${site.name}</title>
</head>
<body>
    <h1>\${site.name}</h1>
    <p>这是 ${templateName} 模板</p>
</body>
</html>`
  }
}

// 保存模板
const saveTemplate = async () => {
  try {
    const response = await themeApi.updateTemplateContent(
      currentTheme.value.name,
      selectedTemplate.value,
      templateContent.value
    )
    if (response.code === 0) {
      ElMessage.success('模板保存成功')
    } else {
      ElMessage.error(response.msg || '保存失败')
    }
  } catch (error) {
    console.error('保存模板失败:', error)
    ElMessage.error('保存模板失败')
  }
}

// 显示复制对话框
const showCopyDialog = (theme: any) => {
  console.log('显示复制对话框，主题:', theme)
  copyForm.sourceTheme = theme.name
  copyForm.targetTheme = theme.name + '_copy'
  copyDialogVisible.value = true
  console.log('复制对话框已显示')
}

// 复制主题
const copyTheme = async () => {
  try {
    copying.value = true
    const response = await themeApi.copyTheme(copyForm.sourceTheme, copyForm.targetTheme)
    if (response.code === 0) {
      ElMessage.success('主题复制成功')
      copyDialogVisible.value = false
      getThemes()
    } else {
      ElMessage.error(response.msg || '复制失败')
    }
  } catch (error) {
    console.error('复制主题失败:', error)
    ElMessage.error('复制主题失败')
  } finally {
    copying.value = false
  }
}

// 导出主题
const exportTheme = async (theme: any) => {
  try {
    ElMessage.info('正在导出主题，请稍候...')

    const response = await themeApi.exportTheme(theme.name)

    // 创建下载链接
    const blob = new Blob([response], { type: 'application/zip' })
    const url = window.URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.download = `${theme.name}_theme_${new Date().toISOString().slice(0, 10)}.zip`
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    window.URL.revokeObjectURL(url)

    ElMessage.success('主题导出成功')
  } catch (error) {
    console.error('导出主题失败:', error)
    ElMessage.error('导出主题失败')
  }
}

// 卸载主题
const uninstallTheme = async (theme: any) => {
  ElMessageBox.confirm(`确定要卸载主题"${theme.displayName}"吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    try {
      const response = await themeApi.uninstallTheme(theme.name)
      if (response.code === 0) {
        ElMessage.success('主题卸载成功')
        getThemes()
      } else {
        ElMessage.error(response.msg || '卸载失败')
      }
    } catch (error) {
      console.error('卸载主题失败:', error)
      ElMessage.error('卸载主题失败')
    }
  }).catch(() => {
    // 用户取消
  })
}

// 格式化配置标签
const formatConfigLabel = (key: string) => {
  const labelMap: Record<string, string> = {
    siteName: '站点名称',
    siteDescription: '站点描述',
    primaryColor: '主色调',
    showBreadcrumb: '显示面包屑',
    showSidebar: '显示侧边栏',
  }
  return labelMap[key] || key
}

onMounted(() => {
  getThemes()
})
</script>

<style scoped lang="scss">
.theme-management {
  padding: 24px;
  background: #f8f9fa;
  min-height: 100vh;

  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    padding: 24px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

    .header-left {
      .page-title {
        font-size: 24px;
        font-weight: 600;
        color: #2c3e50;
        margin: 0 0 6px 0;
      }

      .page-desc {
        font-size: 14px;
        color: #6c757d;
        margin: 0;
      }
    }

    .header-right {
      .install-btn {
        height: 40px;
        padding: 0 20px;
        font-size: 14px;
        font-weight: 500;
        border-radius: 6px;
      }
    }
  }
  
  .theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 24px;

    .theme-card {
      background: white;
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: 16px;
      overflow: hidden;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

      &:hover {
        transform: translateY(-4px);
        border-color: #667eea;
        box-shadow: 0 12px 40px rgba(102, 126, 234, 0.2);
      }

      &.active {
        border-color: #67c23a;
        box-shadow: 0 8px 32px rgba(103, 194, 58, 0.25);

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 4px;
          background: linear-gradient(90deg, #67c23a 0%, #85ce61 100%);
          z-index: 1;
        }
      }
      
      .theme-screenshot {
        height: 220px;
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
          pointer-events: none;
        }

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.3s ease;
        }
        
        .screenshot-placeholder {
          display: flex;
          flex-direction: column;
          align-items: center;
          color: #c0c4cc;
          
          .el-icon {
            font-size: 48px;
            margin-bottom: 8px;
          }
        }
      }
      
      .theme-info {
        padding: 16px;
        
        .theme-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12px;
          
          .theme-name {
            font-size: 16px;
            font-weight: 500;
            color: #303133;
            margin: 0;
          }
          
          .theme-badges {
            display: flex;
            gap: 4px;
          }
        }
        
        .theme-meta {
          margin-bottom: 12px;
          
          .meta-item {
            display: flex;
            font-size: 12px;
            color: #909399;
            margin-bottom: 4px;
            
            .label {
              margin-right: 8px;
            }
            
            .value {
              color: #606266;
            }
          }
        }
        
        .theme-description {
          font-size: 14px;
          color: #606266;
          line-height: 1.5;
          margin-bottom: 16px;
        }
        
        .theme-actions {
          display: flex;
          gap: 8px;
        }
      }
    }
  }
  
  .templates-manager {
    display: flex;
    height: 500px;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    
    .templates-sidebar {
      width: 200px;
      border-right: 1px solid #e4e7ed;
      
      .sidebar-header {
        padding: 12px 16px;
        background: #f5f7fa;
        border-bottom: 1px solid #e4e7ed;
        font-weight: 500;
      }
      
      .template-list {
        .template-item {
          padding: 8px 16px;
          cursor: pointer;
          border-bottom: 1px solid #f0f0f0;
          
          &:hover {
            background: #f5f7fa;
          }
          
          &.active {
            background: #409eff;
            color: white;
          }
        }
      }
    }
    
    .templates-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      
      .content-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        background: #f5f7fa;
        border-bottom: 1px solid #e4e7ed;
        font-weight: 500;
      }
      
      .template-editor {
        flex: 1;
        padding: 16px;
        
        .el-textarea {
          height: 100%;
          
          :deep(.el-textarea__inner) {
            height: 100%;
            resize: none;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
          }
        }
      }
    }
  }
}
</style>
